<template>
  <div>
  <q-dialog v-model="opn" minimized :content-css="{padding:'30px 50px 30px 50px'}">
    <q-card style="min-width: 400px">
            <h5 class="margin20">添加模板</h5>
            <q-card-section>
                <q-input dense v-model="ID" placeholder="编码" disable="false"></q-input>
                <q-input dense v-model="TemplateName" placeholder="模板名称"></q-input>
                <q-input dense v-model="TemplateCode" placeholder="模板编码"></q-input>
                <q-input type="textarea" dense v-model="content" placeholder="模板内容" style="text-align:left"></q-input>
                
               </q-card-section>

           <q-btn-group class="margin20">
                <q-btn color="primary" @click="save">保存</q-btn>
            </q-btn-group>
            <q-btn-group class="margin20">
                <q-btn color="secondary" @click="opn = false" label="取消" />
            </q-btn-group>
            </q-card>
        </q-dialog>

       <div class="row">
   
   
  <div class="col" style="margin-top:20px;">
    <!-- <h5 class="title">失败列表</h5> -->
   <q-btn-group>
                    <q-btn color="blue" icon="add" @click="add" label="增加"></q-btn>
                    <q-btn color="blue" icon="delete" @click="del" label="删除"></q-btn>
                    <q-btn color="blue" icon="create" @click="edt" label="修改"></q-btn>
                    <q-btn color="blue" icon="replay" @click="refresh" label="刷新"></q-btn>
  </q-btn-group>

   <q-table
      title="短信模板"
      :data="data"
      :pagination.sync="pagination" 
      :selection="sltmode"
      :selected.sync="slt"
      :columns="columns"
      row-key="Id"
       />
  </div>
  </div>
 
  </div>
</template>

<script>
  import axios from 'axios'
  import {
         Quasar,
         QUploader,
         QInput,
         QCardSection,
         QCardActions,
         QCard,
         QDialog,
         QBtnGroup,
         QBtn,
         QTable,
         QTh,
         QTr,
         QTd
    } from 'quasar'
export default {
      components: {
          QTable,
          QUploader,
          QInput,
          QCardSection,
          QCardActions,
          QCard,
          QDialog,
          QBtnGroup,
          QBtn,
          QTh,
          QTr,
          QTd
        },
  data () {
    return {
      ID: '',
      pagination: {
                    //descending: false,
                    rowsPerPage: 10,
                    // page: 1,
                    // rowsNumber: 0
                },
      sltmode: 'multiple',
      slt: [],
      TemplateCode:'',
      TemplateName:'',
      content:'',
      opn:false,
      columns: [
        // {
        //   name: 'name',required: true,label: 'Dessert (100g serving)',align: 'left',field: row => row.name,format: val => `${val}`,sortable: true
        { name: 'Id', label: '编码', field: 'Id' },
        { name: 'name', label: '模板名称', field: 'name' },
        { name: 'code', label: '模板编码', field: 'code' },
        { name: 'cont', label: '模板内容', field: 'cont',align: 'left' }
        ],
     data: [
        // {
              
      ]
    }
  },
  methods: {
    getdata() {
        
        var self = this
         axios.post('/getall', {
                       
                    })
                    .then(function(response) {
                        var rt = response.data
                        if (rt.success) {
                             console.log(rt)
                             self.data=rt.templ
                           } else {
                           
                        }
                    })
                    .catch(function(error) {
                        self.$q.notify('未知错误！')
                    })
         self.opn = false           
    },
    del() {
                var self = this
                if (self.slt.length == 0) {
                    self.$q.notify('请选择待删除的记录！')
                    return
                }
                var rs = []
                for (var i = 0; i < self.slt.length; i++) {
                    rs.push(self.slt[i].Id)
                }
               console.log(self.slt)
                axios.post('/del', {
                        ids: rs
                    })
                    .then(function(response) {
                        var rt = response.data
                        if (rt.success) {
                            self.$q.notify('删除成功！')
                        } else {
                            self.$q.notify('出错了！')
                        }
                    })
                    .catch(function(error) {
                        self.$q.notify('未知错误！')
                    })
                self.slt = []
                self.refresh()
            },
    refresh() {
                //this.loadsds(this.srow)
                var self = this
                self.slt=[]
                self.ID=''
                self.TemplateCode=''
                self.TemplateName=''
                self.content=''
                self.getdata()
                
            },
    edt() {
                var self = this
                if (self.slt.length != 1) {
                    self.$q.notify('请只选择一条参考码记录进行修改！')
                    return
                }
                
                self.opn = true
                var tmp=self.slt[0]
                console.log(tmp)
                self.Id = tmp.Id
                self.TemplateName = tmp.name
                self.TemplateCode = tmp.code
                self.content = tmp.cont
                
          },            
    add() {
     var self = this
     self.Id = 0
     self.opn = true
    },
    save() {
        
        var self = this
        //self.opn = true

                axios.post('/save', {
                          Id: self.Id,
                        name: self.TemplateName,
                        code: self.TemplateCode,
                        cont: self.content,
                        
                    })
                    .then(function(response) {
                        var rt = response.data
                        if (rt.success) {
                             console.log(response)
                             
                           } else {
                           
                        }
                    })
                    .catch(function(error) {
                        self.$q.notify('未知错误！')
                    })
                    
         self.opn = false 
         self.refresh()  
                 
    },
      
  },
  mounted: function() {
          this.getdata();
        }
}
</script>

<style lang="stylus">

.title
  text-align center
  margin 12px

.margin20 
 margin 20px
.upstyle
 height 120px

 

</style>